<template>
  <div :id="id" style="width: 100%; height: 100%; z-index: 10;">
  </div>
</template>

<script>
const BASE_URL = 'http://t0.tianditu.gov.cn/vec_c/wmts?tk=eec8c7ee00d8d62dd60a274aa1a1beb5&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles';
export default {
  name: "map",
  data () {
    return {
      option: {
        minZoom: this.mapOption.hasOwnProperty('minZoom') || 0,
        maxZoom: this.mapOption.hasOwnProperty('maxZoom') || 20,
        center: { lon: 114.31667, lat: 30.51667 },
        zoom: this.mapOption.hasOwnProperty('zoom') || 11,
        crs: this.mapOption.hasOwnProperty('crs') || L.CRS.EPSG4326,
        zoomControl: false,
        attributionControl: false
      },
      layerMap: {},
      map: null,
    };
  },
  watch: {
    layerList (val) {
      this.removeAllLayer()
      this.addLayers(val)
    }
  },
  props: {
    id: {
      type: String,
      required: true
    },
    layerList: {
      type: Array,
      default () {
        return [];
      }
    },
    mapOption: {
      type: Object,
      default () {
        return {};
      }
    },
    createMap: Function
  },
  mounted () {
    this.addListen();
    this.initMap()
  },

  methods: {
    initMap () {
      this.map = L.map(this.id, this.option);
      // this.addBaseLayer()
      this.addLayers(this.layerList);
    },

    addListen () {
      this.eventBus.$on('setBaseLayerUrl', this.setBaseLayerUrl);
      this.eventBus.$on('addLayer', this.addLayer);
      this.eventBus.$on('removeLayer', this.removeLayer);
      this.eventBus.$on('updateOpacity', this.updateOpacity);
      this.eventBus.$on('updateLayerIndex', this.updateLayerIndex);
      this.eventBus.$on('showLayer', this.showLayer);
      this.eventBus.$on('hideLayer', this.hideLayer);
    },

    removeListen () {
      this.eventBus.$off('setBaseLayerUrl', this.setBaseLayerUrl);
      this.eventBus.$off('addLayer', this.addLayer);
      this.eventBus.$off('removeLayer', this.removeLayer);
      this.eventBus.$off('updateOpacity', this.updateOpacity);
      this.eventBus.$off('updateLayerIndex', this.updateLayerIndex);
      this.eventBus.$off('showLayer', this.showLayer);
      this.eventBus.$off('hideLayer', this.hideLayer);
    },

    addLayers (layerList) {
      for (let i = 0; i < layerList.length; i++) {
        let layer = layerList[i];
        this.addLayer(layer);
      }
      this.$emit('createMap', this.layerMap)
    },
    addLayer (layerJson) {
      switch (layerJson.layerType) {
        case 'WMTS':
          this.addWMTSLayer(layerJson);
          break;
        case 'WMS':
          this.addWMSLayer(layerJson);
          break;
        case 'VTS':
          this.addVTSLayer(layerJson);
          break;
      }
    },
    addBaseLayer () {
      this.baseLayer = new L.TileLayer(BASE_URL, { tileSize: 256 });
      this.map.addLayer(this.baseLayer);
    },

    setBaseLayerUrl (url) {
      if (this.baseLayer) {
        // this.baseLayer.setUrl(url, true);
        let baseLayerUrl = new L.TileLayer(url, { tileSize: 256 });
        this.map.addLayer(baseLayerUrls);
      }
    },

    addWMTSLayer (layerJson) {
      var layer = new L.TileLayer(layerJson.layerUrl, { tileSize: 256 });
      this.map.addLayer(layer);
      layer.setZIndex(layerJson.layerIndex);
      this.layerMap[layerJson.layerId] = layer;
    },

    addWMSLayer (layerJson) {

    },

    addVTSLayer (layerJson) {

    },

    removeLayer (layerId) {
      let layer = this.layerMap[layerId];
      if (layer) {
        this.map.removeLayer(layer);
        delete this.layerMap[layerId];
      }
    },

    updateOpacity (layerJson) {
      let layer = this.layerMap[layerJson.layerId];
      layer.setOpacity(layerJson.opacity * 0.01);
    },

    updateLayerIndex (layerArray) {
      for (let i = 0; i < layerArray.length; i++) {
        let layerJson = layerArray[i];
        let layer = this.layerMap[layerJson.layerId];
        let zIndex = layerJson.layerIndex;
        layer.setZIndex(zIndex);
      }
    },

    showLayer (layerId) {
      let layer = this.layerMap[layerId];
      if (layer) {
        this.map.addLayer(layer);
        layer.setZIndex(layer.zIndex);
      }
    },

    hideLayer (layerId) {
      let layer = this.layerMap[layerId];
      if (layer && layer.hasOwnProperty('_container')) {
        let zIndex = layer._container.style.zIndex;
        layer.zIndex = zIndex;
        this.map.removeLayer(layer);
      }
    },

    removeAllLayer () {
      for (let key in this.layerMap) {
        this.removeLayer(key);
      }
    }
  },
  destroyed () {
    this.removeListen();
  }
};
</script>
